<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed, 'top-nav': isTopNav }">
    <button class="toggle-btn" @click="toggleCollapse" v-if="!isTopNav">
      <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
        <path d='M9 18l6-6-6-6'/>
      </svg>
    </button>
    <nav class='sidebar-nav'>
      <router-link
        v-for='item in items'
        :key='item.path'
        :to='item.path'
        class='nav-item'
        active-class='router-link-exact-active'
      >
        <span class='nav-icon' v-if='item.icon'>
          <svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
            <path :d='item.icon'/>
          </svg>
        </span>
        <span class='nav-text'>{{ item.title }}</span>
      </router-link>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  items: {
    type: Array as () => Array<{ path: string; title: string; icon?: string }>,
    required: true
  }
});

const isCollapsed = ref(false);
const isTopNav = ref(false);

const checkScreenSize = () => {
  isTopNav.value = window.innerWidth < 768;
  // 小屏幕下自动展开
  if (isTopNav.value) {
    isCollapsed.value = false;
  }
};

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

onMounted(() => {
  checkScreenSize();
  window.addEventListener('resize', checkScreenSize);
});

onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize);
});
</script>

<style scoped>
.sidebar {
  width: 200px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
  height: calc(100vh - 60px);
}

.sidebar-nav {
  padding: 15px 0;
  margin-top: 30px;
  max-height: calc(100% - 30px);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.sidebar-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar.top-nav {
  width: 100%;
  height: auto;
}

.toggle-btn {
  position: absolute;
  top: 10px;
  right: 0px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #165DFF;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0;
}

.sidebar.top-nav .sidebar-nav {
  display: flex;
  margin-top: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s;
  white-space: nowrap;
}

.sidebar.top-nav .nav-item {
  padding: 12px 15px;
}

.nav-text {
  transition: opacity 0.3s ease;
}

.sidebar.collapsed .nav-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.nav-item:hover {
  background-color: #e8f0fe;
  color: #165DFF;
}

.nav-item.router-link-exact-active {
  background-color: #165DFF;
  color: white;
  font-weight: 500;
}

.nav-icon {
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.sidebar.collapsed .nav-icon {
  margin-right: 0;
}
</style>